import { useRef } from 'react'
import { useState } from 'react'


function App() {
  const scrollRef=useRef(null)
  const [clientHeight,setClientHeight]=useState(0);
  const [scrollTop,setScrollTop]=useState(0);
  const [scrollHeight,setScrollHeight]=useState(0);
  const onScroll=()=>{
    if(scrollRef?.current){
      let clientHeight=scrollRef.current.clientHeight;
      let scrollTop=scrollRef.current.scrollTop;
      let scrollHeight=scrollRef.current.scrollHeight;// 滚动内容高度
      setClientHeight(clientHeight)
      setScrollHeight(scrollHeight)
      setScrollTop(scrollTop)
    }
  }
  return (
    <div className="App">
      <div>
        <p>可视区域高度:{clientHeight}</p>
        <p>滚动条滚动高度:{scrollTop}</p>
        <p>滚动内容高度:{scrollHeight}</p>
      </div>
      <div style={{height:200,overflowY:"auto"}} ref={scrollRef} onScroll={onScroll}>
        <div style={{height:2000}}></div>
      </div>
    </div>
  )
}

export default App
